<template>
    <div class="leftFx">
        <ThemeTitle :title="title" />

        <div class="zerenContent">
            <div class="zerenTitle">
                <div>本月责任落实预警</div>
                <div>责任落实区域分析</div>
            </div>
        </div>
        <div class="twoCharts">
            <div id="yujingChart"></div>
            <div id="fenxiChart"></div>
        </div>
        <!-- 隐患排查 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">隐患排查整改率</div>
            </div>
            <!-- select -->
        </div>
        <!-- 隐患排查 -->
        <div id="yhpcChart"></div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle";
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    provide,
} from "vue";
import echarts from "echarts";
import axios from "axios";
export default {
    components: {
        ThemeTitle,
    },
    setup() {
        const title = provide("title", "主体责任落实分析");
        const { ctx } = getCurrentInstance();

        const numList = [2, 5, 1, 3, 8, 0];

        function drawYj(data, names) {
            var dom = document.getElementById("yujingChart");
            var myChart = echarts.init(dom);
            let dataMax = 50;
            const source = {
                data: data,
                indicator: [
                    { name: names[0], max: dataMax },
                    { name: names[1], max: dataMax },
                    { name: names[2], max: dataMax },
                    { name: names[3], max: dataMax },
                ],
            };
            const buildSeries = function (data) {
                const helper = data.map((item, index) => {
                    const arr = new Array(data.length);
                    arr.splice(index, 1, item);
                    return arr;
                });

                return [data, ...helper].map((item, index) => {
                    return {
                        type: "radar",
                        itemStyle: {
                            color: "#31e586",
                        },
                        lineStyle: {
                            color: index === 0 ? "#31e586" : "transparent",
                        },
                        areaStyle: {
                            color: index === 0 ? "#31e586" : "transparent",
                            opacity: 0.3,
                        },
                        tooltip: {
                            show: index === 0 ? false : true,
                            formatter: function () {
                                return (
                                    source.indicator[index - 1].name +
                                    source.data[index - 1] +
                                    "%"
                                );
                            },
                        },
                        z: index === 0 ? 1 : 2,
                        data: [item],
                    };
                });
            };

            var option = {
                tooltip: {},
                radar: {
                    radius: "50%",
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            fontSize: 12,
                            color: ["#d1dbf2"],
                            padding: [-100, -10],
                        },
                    },
                    grid: {
                        x: 40,
                        x2: 100,
                        y2: 150,
                    },

                    splitNumber: 4,
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: [
                                "rgba(12,62,129,0)",
                                "rgba(12,62,129,0.3)",
                                "rgba(12,62,129,0)",
                                "rgba(12,62,129,0)",
                            ],
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#0c3e81",
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#0c3e81",
                        },
                    },
                    indicator: source.indicator,
                },
                series: buildSeries(source.data),
            };

            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        function drawFx(Data) {
            var dom = document.getElementById("fenxiChart");
            var myChart = echarts.init(dom);

            let color = [
                "#0090FF",
                "#36CE9E",
                "#FFC005",
                "#FF515A",
                "#8B5CFF",
                "#00CA69",
            ];
            let echartData = Data;

            let xAxisData = echartData.map((v) => v.name);
            //  ["1", "2", "3", "4", "5", "6", "7", "8"]
            let yAxisData1 = echartData.map((v) => v.value1);
            // [100, 138, 350, 173, 180, 150, 180, 230]
            let yAxisData2 = echartData.map((v) => v.value2);
            // [233, 233, 200, 180, 199, 233, 210, 180]
            const hexToRgba = (hex, opacity) => {
                let rgbaColor = "";
                let reg = /^#[\da-f]{6}$/i;
                if (reg.test(hex)) {
                    rgbaColor = `rgba(${parseInt(
                        "0x" + hex.slice(1, 3)
                    )},${parseInt("0x" + hex.slice(3, 5))},${parseInt(
                        "0x" + hex.slice(5, 7)
                    )},${opacity})`;
                }
                return rgbaColor;
            };

            let option = {
                color: color,
                legend: {
                    right: 10,
                    top: 1,
                    textStyle: {
                        color: "#fff",
                    },
                },
                grid: {
                    bottom: "20%",
                },
                tooltip: {
                    trigger: "axis",
                    formatter: function (params) {
                        let html = "";
                        params.forEach((v) => {
                            html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgba(0,0,0,.5)"></span>
                                    ${v.seriesName}.${v.name}
                                    <span style="color:${
                                        color[v.componentIndex]
                                    };font-weight:700;font-size: 18px">${
                                v.value
                            }</span>
                                    分`;
                        });
                        return html;
                    },
                    extraCssText:
                        "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
                    axisPointer: {
                        type: "shadow",
                        shadowStyle: {
                            color: "rgba(0,0,0,0.1)",
                            shadowColor: "rgba(225,225,225,1)",
                            shadowBlur: 1,
                        },
                    },
                },
                grid: {
                    top: "15%",
                    bottom: 1,
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                            },
                            rotate: 40,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#D9D9D9",
                            },
                        },
                        data: xAxisData,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "分",
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                            },
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40,
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#E9E9E9",
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#D9D9D9",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "本月",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,/
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 8,
                            },
                        },

                        data: yAxisData1,
                    },
                    {
                        name: "上月",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[1],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[1], 0.5),
                                shadowOffsetY: 8,
                            },
                        },

                        data: yAxisData2,
                    },
                ],
            };

            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        function drawYh(xData, yData) {
            var dom = document.getElementById("yhpcChart");
            var myChart = echarts.init(dom);
            let option = {
                grid: {
                    top: "20%",
                    bottom: "15%", //也可设置left和right设置距离来控制图表的大小
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true,
                        },
                    },
                },
                // legend: {
                //     data: ["销售水量", "主营业务"],
                //     top: "15%",
                //     textStyle: {
                //         color: "#ffffff"
                //     }
                // },
                xAxis: {
                    data: xData,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: "#01FCE3",
                        },
                    },
                    axisTick: {
                        show: true, //隐藏X轴刻度
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff", //X轴文字颜色
                        },
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        name: "%",
                        nameTextStyle: {
                            color: "#fff",
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#FFFFFF",
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    {
                        type: "value",
                        name: "同比",
                        nameTextStyle: {
                            color: "#ebf8ac",
                        },
                        show: false,
                        position: "right",
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            formatter: "{value} %", //右侧Y轴文字显示
                            textStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    {
                        type: "value",
                        gridIndex: 0,
                        min: 50,
                        max: 100,
                        splitNumber: 8,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: [
                                    "rgba(250,250,250,0.0)",
                                    "rgba(250,250,250,0.05)",
                                ],
                            },
                        },
                    },
                ],
                series: [
                    // {
                    //     name: "销售水量",
                    //     type: "line",
                    //     yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    //     smooth: false, //平滑曲线显示
                    //     showAllSymbol: true, //显示所有图形。
                    //     symbol: "circle", //标记的图形为实心圆
                    //     symbolSize: 10, //标记的大小
                    //     itemStyle: {
                    //         //折线拐点标志的样式
                    //         color: "#058cff"
                    //     },
                    //     lineStyle: {
                    //         color: "#058cff"
                    //     },
                    //     areaStyle:{
                    //         color: "rgba(5,140,255, 0.2)"
                    //     },
                    //     data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2.9, 2.8, 3, 5]
                    // },
                    {
                        name: "隐患排查",
                        type: "bar",
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: "rgba(55,220,255,1)",
                                // color: echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //         offset: 0,
                                //         color: "#00FFE3"
                                //     },
                                //     {
                                //         offset: 1,
                                //         color: "#4693EC"
                                //     }
                                // ])
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        onMounted(() => {
            axios
                .post(
                    `http://172.25.110.34:81/foundation/union/subject/scrnZtzrlsfx/list`,
                    {}
                )
                .then((res) => {
                    let hyData = res.data.data[0];
                    let byzrlsyj = hyData.byzrlsyj;
                    let byzrlsyjVal = byzrlsyj.map((item, index) => {
                        return item.sl;
                    });
                    let byzrlsyjName = byzrlsyj.map((item, index) => {
                        return item.lb;
                    });
                    drawYj(byzrlsyjVal, byzrlsyjName);
                    let zrqysy = hyData.zrqysy;
                    let zrqyby = hyData.zrqyby;
                    let fxChartData = [];
                    zrqyby.forEach((item, index) => {
                        fxChartData[index] = {
                            name: item.xzqy,
                            value1: item.sl,
                            value2: 0,
                        };
                    });
                    let xData = hyData.yhpczgl.map((item) => {
                        return item.mon;
                    });
                    let yData = hyData.yhpczgl.map((item) => {
                        return item.zgl;
                    });
                    drawFx(fxChartData);
                    drawYh(xData, yData);
                });
            //drawYh()
        });
        return {
            title,
        };
    },
};
</script>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .leftFx {
        margin-top: vh(20);

        .zerenContent {
            .zerenTitle {
                display: flex;
                justify-content: space-around;

                div {
                    color: rgba(0, 234, 255, 1);
                    flex: 1;
                    font-size: vw(16);
                    text-align: center;
                    height: vh(30);
                    line-height: vh(40);
                }
            }
        }

        .twoCharts {
            display: flex;
            width: vw(364);
            height: vh(150);
            margin-top: vh(15);

            #yujingChart {
                flex-shrink: 0;
                width: vw(182);
                height: vh(150);
            }

            #fenxiChart {
                flex-shrink: 0;
                width: vw(182);
                height: vh(150);
            }
        }

        #yhpcChart {
            width: vw(364);
            height: vh(160);
        }

        .geoIntro {
            width: vw(365);
            height: vh(30);
            display: flex;
            justify-content: space-between;
            margin-top: vh(15);

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .leftFx {
        position: absolute;
        right: 0;
        top: 0;
        margin-top: vh(20);

        .zerenContent {
            .zerenTitle {
                width: vw1(414);
                display: flex;
                justify-content: space-around;

                div {
                    color: rgba(0, 234, 255, 1);
                    flex: 1;
                    font-size: vw1(16);
                    text-align: center;
                    height: vh(30);
                    line-height: vh(40);
                }
            }
        }

        .twoCharts {
            width: vw1(364);
            height: vh(600);
            margin-top: vh(15);

            #yujingChart {
                width: vw1(364);
                height: vh(300);
            }

            #fenxiChart {
                width: vw1(364);
                height: vh(300);
            }
        }

        #yhpcChart {
            width: vw1(364);
            height: vh(260);
        }

        .geoIntro {
            width: vw1(365);
            height: vh(30);
            display: flex;
            justify-content: space-between;
            margin-top: vh(15);

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }
        }
    }
}
</style>